<template>
	<view class="addPlan">
		<view class="trips">
			<view v-for="(trip,i) in trips" class="trip-item">
				<view>
					<view class="title">行程{{i+1}}</view>
					<view class="remove" @click="removeTrip(i)">×</view>
				</view>
				<view class="trip-item-row">
					<input class="tripTitle" placeholder="请输入标题" v-model="trip.title"/>
				</view>
				<view class="timeType trip-item-row">
					<radio-group @change="startTimeTypeChange($event, i)">
						<label class="radio"><radio value="specificTime" :checked="trip.start.timeType=='specificTime'" style="transform:scale(0.7)"/>具体时刻</label>
						<label class="radio"><radio value="harfDay" :checked="trip.start.timeType=='harfDay'" style="transform:scale(0.7)"/>半天</label>
						<label class="radio"><radio value="allDay" :checked="trip.start.timeType=='allDay'" style="transform:scale(0.7)"/>全天</label>
					</radio-group>
				</view>
				<view class="trip-start trip-item-row">
					<view class="trip-label">开始</view>
					<view class="trip-date">
						<picker mode="date" fields="day" :value="trip.start.date" :start="startDate" :end="endDate" @change="bindStartDateChange($event, i)">
							<view class="uni-input">{{trip.start.date}}</view>
						</picker>
					</view>
					<view class="trip-time">
						<picker v-show="trip.start.timeType=='harfDay'" mode="selector" :range="harfDay" :value="trip.start.harfDay" @change="bindStartHarfDayChange($event, i)">
							<view class="uni-input">{{harfDay[trip.start.harfDay]}}</view>
						</picker>
						<picker v-show="trip.start.timeType=='specificTime'" mode="time" :value="trip.start.time" start="00:00" end="23:59" @change="bindStartTimeChange($event, i)">
							<view class="uni-input">{{trip.start.time}}</view>
						</picker>
					</view>
					<view class="trip-position" @click="addPosition(i, 'start', trip.start.position)">
						位置：
						<text v-if="trip.start.position.address != null">{{trip.start.position.address}}</text>
						<text v-else>添加位置</text>
					</view>
				</view>
				<view class="trip-end trip-item-row">
					<view class="trip-label">结束<switch :checked="trip.end.show" @change="showEnd($event, i)" style="transform:scale(0.7)"/></view>
					<view class="trip-date" v-show="trip.end.show">
						<picker mode="date" fields="day" :value="trip.end.date" :start="startDate" :end="endDate" @change="bindEndDateChange($event, i)">
							<view class="uni-input">{{trip.end.date}}</view>
						</picker>
					</view>
					<view class="trip-time" v-show="trip.end.show">
						<picker v-show="trip.start.timeType=='harfDay'" mode="selector" :range="harfDay" :value="trip.end.harfDay" @change="bindEndHarfDayChange($event, i)">
							<view class="uni-input">{{harfDay[trip.end.harfDay]}}</view>
						</picker>
						<picker v-show="trip.start.timeType=='specificTime'" mode="time" :value="trip.end.time" start="00:00" end="23:59" @change="bindEndTimeChange($event, i)">
							<view class="uni-input">{{trip.end.time}}</view>
						</picker>
					</view>
					<view class="trip-position" @click="addPosition(i, 'end', trip.end.position)">
						位置：
						<text v-if="trip.end.position.address != null">{{trip.end.position.address}}</text>
						<text v-else>添加位置</text>
					</view>
				</view>
			</view>
		</view>
		<view class="addNext" @click="addTrip">继续添加 +</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startDate:'1901-01-01',
				endDate:'2099-12-31',
				harfDay: ['上午', '下午'],
				trips: [],
				positionTemp: {
					index: 0,
					type: ''
				}
			}
		},
		created() {
			var _this = this;
			// 第一次进入默认添加一条行程
			_this.addTrip();
			// 设置位置信息
			uni.$on('setPosition', (result) => {
				if (result) {
					_this.trips[_this.positionTemp.index][_this.positionTemp.type].position = result.position;
				}
			})
		},
		methods: {
			/**
			 * 添加一条行程
			 */
			addTrip: function() {
				var trip = {
					title: '',
					start: {
						timeType: 'specificTime',
						date: getNowDate(),
						harfDay: 0,
						time: '09:00',
						position: {}
					},
					end: {
						show: true,
						date: getNowDate(),
						harfDay: 0,
						time: '10:00',
						position: {}
					}
				};
				this.trips.push(trip);
			},
			removeTrip: function(i) {
				console.log(i)
				this.trips.splice(i, 1);
			},
			bindStartDateChange: function(e, i) {
				this.trips[i].start.date = e.detail.value;
			},
			bindEndDateChange: function(e, i) {
				this.trips[i].end.date = e.detail.value;
			},
			bindStartTimeChange: function(e, i) {
				this.trips[i].start.time = e.detail.value;
			},
			bindEndTimeChange: function(e, i) {
				this.trips[i].end.time = e.detail.value;
			},
			showEnd: function(e, i) {
				this.trips[i].end.show = e.detail.value;
			},
			startTimeTypeChange: function(e, i) {
				this.trips[i].start.timeType = e.detail.value;
			},
			bindStartHarfDayChange: function(e, i) {
				this.trips[i].start.harfDay = e.detail.value;
			},
			bindEndHarfDayChange: function(e, i) {
				this.trips[i].end.harfDay = e.detail.value;
			},
			/**
			 * 添加位置
			 * @param {Object} index
			 * @param {Object} type
			 */
			addPosition: function(index, type, position) {
				this.positionTemp.index = index;
				this.positionTemp.type = type;
				var url = '/pages/trip/details/positionPicker';
				if (position.coordinate) {
					url += '?coordinate0='+position.coordinate[0]+'&coordinate1='+position.coordinate[1];
				}
				uni.navigateTo({
				    url: url,
					fail (error) {
						console.log(error)
					}
				});
			}
		},
		/**
		 * 导航栏按钮回调事件
		 * @param {Object} button
		 */
		onNavigationBarButtonTap: function(button) {
			// 保存事件
			if (button.id == "save") {
				console.log(this.trips);
				plus.sqlite.openDatabase({
					name: 'my_travel_book',
					path: '_doc/my_travel_book.db',
					success: function(e){
						console.log('openDatabase success!');
					},
					fail: function(e){
						console.log('openDatabase failed: '+JSON.stringify(e));
					}
				});
			}
		}
	}
	function getNowDate() {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}
</script>

<style>
	/* .addPlan uni-radio .uni-radio-input {
		width: 20rpx;
		height: 20rpx;
	}
	.addPlan uni-radio .uni-radio-input.uni-radio-input-checked:before {
		font-size: 20rpx;
	} */
	.trip-item {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		border: 1rpx solid #afafaf;
		border-radius: 20rpx;
		position: relative;
	}
	.trip-item .remove {
		color: #FF5A5F;
		/* background-color: #afafaf; */
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 0;
		right: 0rpx;
		border-top-right-radius:20rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 40rpx;
	}
	.trip-item-row {
		margin-top: 20rpx;
	}
	.tripTitle {
		border-bottom: 1px solid #E5E5E5;
		padding-bottom: 10rpx;
	}
	.timeType label {
		margin-right: 30rpx;
	}
	.trip-label {
		width: 30%;
		display: inline-block;
	}
	.trip-date {
		width: 30%;
		display: inline-block;
	}
	.trip-time {
		width: 30%;
		display: inline-block;
	}
	.addNext {
		width: 90%;
		margin: 0 auto;
		box-sizing: border-box;
		border: 1rpx solid #afafaf;
		/* border-top: 0; */
		text-align: center;
		margin-top: 20rpx;
		padding: 10rpx 0;
	}
	.trip-position uni-text span{
		color: #6f6f6f;
	}
</style>
